<template>
    <el-container id="authorize" v-loading.fullscreen.lock="loading">
        <el-header>
            您要允许{{ description }}访问以下内容吗？
        </el-header>
        <el-main>
            <el-row><el-checkbox v-model="user_info" disabled>用户账户基本信息</el-checkbox></el-row>
            <el-row><el-checkbox v-model="admin" v-if="show.admin">管理课程信息</el-checkbox></el-row>
            <el-row><el-checkbox v-model="file" v-if="show.file">存取文件</el-checkbox></el-row>
        </el-main>
        <el-footer>
            <el-button type="primary" @click="grant">授权</el-button>
            <el-button @click="reject">拒绝</el-button>
        </el-footer>
    </el-container>
</template>

<script>
    import { authorize } from "@/api/authorize";

    export default {
        name: "Authorize",
        props: [ 'redirect', 'description', 'scope' ],
        data() {
            return {
                user_info: true,
                admin: false,
                file: false,
                show: {
                    admin: false,
                    file: false,
                },
                loading: false,
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                const scopeArray = vm.scope.split(' ');
                if (scopeArray.indexOf('admin') !== -1) vm.show.admin = true;
                if (scopeArray.indexOf('file') !== -1) vm.show.file = true;
            });
        },
        methods: {
            grant() {
                this.loading = true;
                const scope = [ 'user_info' ];
                if (this.admin) scope.push('admin');
                if (this.file) scope.push('file');
                authorize(scope.join(' ')).then(result => {
                    if (result.status === 204) {
                        if (this.redirect) {
                            window.location = this.redirect;
                        } else {
                            this.$alert('授权成功');
                        }
                    } else {
                        this.$alert('服务器错误');
                    }
                }).catch(reason => {
                    this.$alert('发生错误：' + JSON.stringify(reason));
                }).finally(() => {
                    this.loading = false;
                });
            },
            reject() {
                this.loading = true;
                authorize('').then(result => {
                    if (result.status === 204) {
                        if (this.redirect) {
                            window.location = this.redirect;
                        } else {
                            this.$alert('拒绝成功');
                        }
                    } else {
                        this.$alert('服务器错误');
                    }
                }).catch(reason => {
                    this.$alert('发生错误：' + JSON.stringify(reason));
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>
    .el-footer {
        margin-top: 35px;
    }
    .el-main {
        text-align: left;
        position: relative;
        max-width: 200px;
        left: 50%;
        margin-left: -100px;
    }
    .el-checkbox {
        margin-top: 7px;
        margin-bottom: 7px;
    }
</style>
